The text style properties affect how text appears on a page. While HTML gives you some control over font, font color, font size and font weight, CSS extends these, and gives further control beyond that provided by HTML.
CSS provides the following properties:
CSS2 introduced the text-shadow property, the font-size-adjust property and the font-stretch property.
This property sets the foreground color of an element, essentially the text color.
The color property, not surprisingly, takes color values. For a detailed description of color values, see our section on values.
There is no specified default color value. It is dependent on the browser. The value that a browser uses by default is almost certainly black, but remember, most browsers allow users to specify default text characteristics.
Child elements inherit the color of their parent elements. Remember, inherited properties can be overridden.
Non US speakers of English please note that colour is not an accepted variant spelling for the purposes of CSS syntax.
The weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a page.
font-weight may take two kinds of values, keywords and numerical values.
You may use the following keywords: normal, bold, bolder, lighter.
bolder specifies that the text should be one degree bolder than the surrounding text (the parent element).
lighter specifies that the text should be one degree lighter than the surrounding text.
font-weight can also be specified using numerical values: 100, 200, 300, 400, 500, 600, 700, 800, 900.
Each value is one degree bolder than the previous. normal is equivalent to 400. bold is equivalent to 700.
By default, the font-weight of an element is normal.
Elements have the same absolute font-weight as their parents. That is, an element inherits the numerical value of its parent, not the relative value of bolder or lighter.
Current versions of major browsers only display two weights, normal and bold. All values are translated into one of these. For example, 100 to 600 are usually drawn as normal weight, while 700 to 900 are drawn as bold. For more detailed information on this see the section on font-weight in our Browser Support Guide.
If you are familiar with the <font face="font name"> tag in HTML, you'll find that the font-family property works similarly. This property specifies a list of preferred fonts that a browser should use to draw the element.
A browser will use the first font in the list which is installed on the system it is running on.
Because none of the desired fonts may be on the system a browser is running on, CSS introduces the idea of a font family. A font family is a generic name for a type of font. The specified font families are:
CSS2 introduced the concept of system fonts. The font-family in CSS2 can be specified as one of several system fonts, that is one of the fonts that the system uses for its major components, such as menu items and window titles. When a system font is chosen, the font, size, weight and style that the system uses for this kind of item (for example for menu items) are all used.
The font-family property is a list of font names and font family names. Each item in the list is separated by a comma.
When the name of a font is more than one word, it should be quoted, as in "Times New Roman" .
System fonts can be one of the following
Note that when one of these values is used, this affects the choice of font, along with the style, size and weight of the font. If these values are also set, they are overridden by the style, size and weight that the system uses for drawing the chosen element.
There is no specified default value for font-family. It is up to browsers to choose a default font. Usually this is Times, however, as with other properties, users can often specify their default font in a browser.
An element will have the same font as its parent element, unless it has a font-family property of its own.
The font-family property helps you go a long way to ensuring that your text looks a lot like what you want it to on various platforms, as each operating system usually has a default set of fonts, which largely differ from those of other users. By using a list of fonts, you can provide alternatives for the major operating systems.
Keep in mind that there are a number of free fonts designed specifically for onscreen reading that are becoming widely distributed. These include Verdana, Minion Web, Georgia and others. These might be good options.
It is recommended that you choose generic font family as the last option in the font-family list. This ensures some semblance of your design being displayed in the reader's page.
The font-size property lets you specify how large text appears on a web page. With HTML, you are restricted to 7 relative sizes that have no relationship with traditional type measurements such as points, ems, exs and picas. Nor do HTML text sizes even have any relationship with pixels.
CSS allows you to specify the size of font in any of these measures, and in a number of other ways.
Length Values
The font-size property can specify the size of a text element in several units. You can specify font sizes in the following units:
In our section on values, we cover each of these in some detail.
Keyword Values
In addition, font-sizes can be specified using both relative and absolute keywords.
The following are the relative keywords: larger and smaller
larger specifies a font-size one degree larger than the surrounding text.
smaller specifies a degree smaller than the surrounding text. The exact appearance is determined by the browser, and the same text may appear differently in different browsers.
The absolute keywords are:
Again, it is up to the browser to determine the exact appearance of text that has a font-size property applied to it.
By default, text appears with a font-size of medium. Keep in mind, it is a matter for browsers to determine what this size in fact appears like.
The size of text is the same as that of the element which contains it, unless a font-size is applied to it.
The choice of how to specify font-sizes is quite tricky. Note that specifying size in points and pixels is very problematic. 9pt text on a Windows computer might look acceptable, but may be illegible on a Macintosh, due to their differing logical resolutions. Rather than go into detail here, you might like to take a look at this discussion of text sizes by a renowned web page developer, Tod Fahrner.
CSS2 introduced this sophisticated property to allow for better substitution of fonts when a first choice font is not available.
The font-family property allows the specification of several fonts to be used for an element. When the first choice font is not available, the browser will use the first font in the list that is available, or failing that a generic font. For more see the font-family property. This leads to problems, because very few fonts have similar "metrics", that is, look similar. One of the important aspects of fonts that make them look similar is the ratio between the height (the em-height) of the font, and the x-height of the font. This is known as the z ratio of the font. Fonts with a similar z ratio look similar (to be more precise, are very similar in their apparent size when given the same size in pixels, points, etc.). The lower this ratio, the "bigger" a font will appear. By scaling fonts based on this ratio, similar sized text will appear, regardless of the font that is actually used.
A browser uses the font-size-adjust value to scale the font that is used so that regardless of the font that is in fact used, the text size should appear similar.
font-size-adjust takes a value of none, or a decimal value.
When a value of none is specified, the z ratio of the second choice font is not adjusted.
When a decimal value is specified, the z ratio of the font that is actually used is scaled using this value so that it appears similar in size to how it would appear were the first choice font available.
By default, font-size-adjust is set to none.
font-size-adjust is inherited, but it is the parent's font-size, not the adjusted font-size that is inherited.
What it does
The font-variant property lets you specify that text should appear in small capitals.
font-variant can take the value of normal or small-caps.
normal specifies that text should appear using capital or lowercase letters as it appears in the source.
small-caps specifies that lowercase letters (but not capitals) should appear as small capital letters (these are capital letters that have more or less the same size as the lowercase letters).
By default, text appears with a font-variant of normal.
The variant of text is inherited from a parent element.
In traditional typography, there are several different styles of font. With CSS, you can specify the style of the font that is to be applied to an element, using the font-style property.
The three styles of font supported by CSS are normal, italic and oblique. Without going into any detail, normal font is the standard form of a font, referred to as "roman" in traditional typographic terminology. italic and oblique font-styles will in all likelihood appear the same. It is beyond the scope of this discussion to go into detail about why, and what exactly the difference is.
The font-style property can take one of three values: normal, italic and oblique.
If not otherwise specified, the font-style of an element is normal.
The font-style of an element is that of its parent element, unless a font-style is specified for the element.
You probably think of italic as a style (or cue), as this is the way that desktop publishing categorizes the effect. CSS in part uses more traditional typographical terminology and concepts, in addition to DTP. Italic is often thought of in the same breath as underlining, and other visual effects. The text-decoration property, discussed below, provides control over a number of these kinds of effect.
CSS2 introduced the font-stretch property. This allows you to condense and expand the characters of text.
Keyword Values
font-stretch takes one of 9 absolute keyword values, which specify how far the text is expanded or condensed. These keywords are
In addition, font-stretch takes one of two relative keywords, wider and narrower.
By default, text appears with a font-stretch of normal. Keep in mind, it is a matter for browsers to determine what this in fact appears like.
The stretch of text is the same as that of the element which contains it, unless a font-stretch is applied to it.
The text-decoration property enables you to specify a number of effects that might be thought of as styles. With CSS you can apply the following styles to text: none, underline, overline, line-through, blink.
An element can have either a text-decoration of none, or any number of the other styles.
text-decoration can be either none, or a list of one or more of underline, overline, line-through, blink. If there is more than one value in the list, values are separated by spaces.
By default, the text-decoration of an element is none.
Technically, text-decoration is not inherited. In practice, it is.
Confused? If you aren't interested, assume that text-decoration is inherited. If you are interested in what I mean, read on.
text-decoration spans an entire element, and so affects child elements. Even though they don't inherit the property, they are affected by it. Enough already.
Many of what we might think of as styles (thinking in word processing terms) are lumped into this property. If you are looking for other related styles, you might look at font-weight for bold, font-style for italic, and font-family to specify the font in which an element appears.
text-transform allows you to specify the capitalization of text. There are three types of capitalization, and as well you can specify that an element not be affected by text-transformation.
The text-transform property allows you to ensure that an element conforms to a specific type of capitalization. The three types of capitalization supported are
Regardless of the actual capitalization of the text, the browser transforms the text to conform to the desired capitalization.
Alternatively, you can specify a text-transform of none. This ensured that inherited text-transform values have no effect.
By default, an element has a text-transform of none.
Elements have the text-transform value of their parent element.
Many properties, among them text-transform, have a possible value of none. These values exist to let you override the effect of inherited values.
CSS2 introduced the text-shadow property.
text-shadow allows the simple creation of text shadow effects (the drop shadow is the most commonly seen version of these).
Text shadows are specified by a series of shadow effects that can be applied to the same element simultaneously.
A shadow effect is specified by setting the top left hand corner of the effect (for example to drop it below or push it above the text being shadowed), as well as an optional radius value that determines the extent of the blur in the effect. All of these can be specified using various units.
In addition, a color can be specified for the effect, using any of the possible color units (keywords, rgb and hexadecimal values). For more on color units see our section on color values.
text-shadow is a list of shadow effects, each separated by a comma.
A shadow effect is specified by two unit values (for the top and left hand side of the effect) and an optional blur radius, all of which can be specified in any length units (pts, pxs, ems, exs, etc.).
In addition a color value can be specified in any of the ways in which colors can be specified.
If no text-shadow is specified, the text-shadow of an element is none.
An element does not inherit the text-shadow of its parent.